<template>
  <div>
    <a-card :bordered="false">
      <f-search-form :more="true" @searchHandler="searchHandler">
        <f-search-form-item label="状态" name="syncStatus"/>
        <f-search-form-item label="项目代码" name="projectCode"/>
        <f-search-form-item label="项目名称" name="projectName"/>
        <f-search-form-item label="专业代码" name="majorCode"slot="advanced" />
        <f-search-form-item label="专业名称" name="majorName"slot="advanced" />
        <f-search-form-item label="工程包代码" name="packageNo"slot="advanced" />
        <f-search-form-item label="工程包名称" name="packageName"slot="advanced" />
        <f-search-form-item label="领料申请人" name="userName"slot="advanced" />
        <f-search-form-item label="领料申请时间" name="appTime"slot="advanced" />
        <f-search-form-item label="预留编号" name="reserveNo"slot="advanced" />
        <f-search-form-item label="预留项目编号" name="reserveRow"slot="advanced" />
        <f-search-form-item label="库存地点" name="lgort"slot="advanced" />
      </f-search-form>
      <f-table ref="table" rowKey="recDecId" :columns="columns" :exportBtn="true" :multiple="false" :operator="operator" :params="queryParam" :api="api.recDeliReqConfRecord"
               :scroll="{ x: 1300, y: 500 }">
        <span slot="appTime" slot-scope="appTime">
          {{ appTime | format }}
        </span>

        <span slot="receivedDate" slot-scope="receivedDate">
          {{ receivedDate | format }}
        </span>
        <span slot="budat" slot-scope="budat">
          {{ budat | format }}
        </span>
        <span slot="bldat" slot-scope="bldat">
          {{ bldat | format }}
        </span>
        <!-- 状态标识 -->
        <a-tag v-if="syncStatus === '0'" color="geekblue" slot="syncStatus" slot-scope="syncStatus">
          {{ syncStatus | formatSyncStatus }}
        </a-tag>
        <a-tag v-else-if="syncStatus === '1'" color="geekblue" slot="syncStatus" slot-scope="syncStatus">
          {{ syncStatus | formatSyncStatus }}
        </a-tag>
        <a-tag v-else-if="syncStatus === '2'" color="green" slot="syncStatus" slot-scope="syncStatus">
          {{ syncStatus | formatSyncStatus }}
        </a-tag>
        <a-tag v-else-if="syncStatus === '3'" color="volcano" slot="syncStatus" slot-scope="syncStatus">
          {{ syncStatus | formatSyncStatus }}
        </a-tag>
        <a-tag v-else color="volcano" slot="syncStatus" slot-scope="syncStatus">
          {{ syncStatus | formatSyncStatus }}
        </a-tag>
      </f-table>
      <brdr-drawer ref="drawer"></brdr-drawer>
    </a-card>
  </div>
</template>
<script>
  import brdrDrawer from './recDeliReqConfRecord_drawer.vue'
  import api from './js/api'
  import { formatDate, formatSyncStatus } from '../common/data'
  export default {
    name: 'TableList',
    components: {
      brdrDrawer
    },
    data() {
      let me = this
      //操作按钮
      let operator = []
      // operator.push({
      //   name: '添加',
      //   icon: 'plus',
      //   that: this,
      //   handler: function(table, that) {
      //       that.$refs.drawer.showDrawer()
      //   }
      // })

      return {
        api:  Object.assign(api, this.api),
        //列表初始化查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '出库状态',
            align: 'center',
            dataIndex: 'syncStatus',
            scopedSlots: { customRender: 'syncStatus' },
            width: 110,
            sorter: (a, b) => a.syncStatus.length - b.syncStatus.length
          },
          {
            title: '项目代码',
            align: 'center',
            dataIndex: 'projectCode',
            width: 120,
            sorter: (a, b) => a.projectCode.length - b.projectCode.length
          },
          {
            title: '项目名称',
            align: 'center',
            dataIndex: 'projectName',
            width: 180,
            sorter: (a, b) => a.projectName.length - b.projectName.length
          },
          {
            title: '专业代码',
            align: 'center',
            dataIndex: 'majorCode',
            width: 100,
            sorter: (a, b) => a.majorCode.length - b.majorCode.length
          },
          {
            title: '专业名称',
            align: 'center',
            dataIndex: 'majorName',
            width: 100,
            sorter: (a, b) => a.majorName.length - b.majorName.length
          },
          {
            title: '工程包代码',
            align: 'center',
            dataIndex: 'packageNo',
            width: 100,
            sorter: (a, b) => a.packageNo.length - b.packageNo.length
          },
          {
            title: '工程包名称',
            align: 'center',
            dataIndex: 'packageName',
            width: 100,
            sorter: (a, b) => a.packageName.length - b.packageName.length
          },
          {
            title: '申请人',
            align: 'center',
            dataIndex: 'userName',
            width: 100,
            sorter: (a, b) => a.userName.length - b.userName.length
          },
          {
            title: '申请时间',
            align: 'center',
            dataIndex: 'appTime',
            width: 100,
            scopedSlots: { customRender: 'appTime' },
            sorter: (a, b) => a.appTime.length - b.appTime.length
          },
          {
            title: '已采购量',
            align: 'center',
            dataIndex: 'purchaseNum',
            width: 100,
            sorter: (a, b) => a.purchaseNum.length - b.purchaseNum.length
          },
          {
            title: '在途数量',
            align: 'center',
            dataIndex: 'onLineNum',
            width: 100,
            sorter: (a, b) => a.onLineNum.length - b.onLineNum.length
          },
          {
            title: '到货数量',
            align: 'center',
            dataIndex: 'receiveNum',
            width: 100,
            sorter: (a, b) => a.receiveNum.length - b.receiveNum.length
          },
          {
            title: '需求计划日期',
            align: 'center',
            dataIndex: 'receivedDate',
            width: 100,
            scopedSlots: { customRender: 'receivedDate' },
            sorter: (a, b) => a.receivedDate.length - b.receivedDate.length
          },
          {
            title: '过帐日期',
            align: 'center',
            dataIndex: 'budat',
            width: 100,
            scopedSlots: { customRender: 'budat' },
            sorter: (a, b) => a.budat.length - b.budat.length
          },
          {
            title: '凭证日期',
            align: 'center',
            dataIndex: 'bldat',
            width: 100,
            scopedSlots: { customRender: 'bldat' },
            sorter: (a, b) => a.bldat.length - b.bldat.length
          },
          {
            title: '抬头文本',
            align: 'center',
            dataIndex: 'bktxt',
            width: 100,
            sorter: (a, b) => a.bktxt.length - b.bktxt.length
          },
          {
            title: '班组名称',
            align: 'center',
            dataIndex: 'supplierNameForRecord',
            width: 100,
            sorter: (a, b) => a.supplierName.length - b.supplierName.length
          },
          {
            title: '本次领料量',
            align: 'center',
            dataIndex: 'deliveryNumThis',
            width: 100,
            sorter: (a, b) => a.deliveryNumThis.length - b.deliveryNumThis.length
          },
          {
            title: '预留编号',
            align: 'center',
            dataIndex: 'reserveNo',
            width: 100,
            sorter: (a, b) => a.reserveNo.length - b.reserveNo.length
          },
          {
            title: '预留项目编号',
            align: 'center',
            dataIndex: 'reserveRow',
            width: 100,
            sorter: (a, b) => a.reserveRow.length - b.reserveRow.length
          },
          {
            title: '库存地点',
            align: 'center',
            dataIndex: 'lgort',
            width: 100,
            sorter: (a, b) => a.lgort.length - b.lgort.length
          },
          {
            title: 'SAP出库返回消息文本',
            align: 'center',
            dataIndex: 'msgtxFromSap',
            width: 210,
            sorter: (a, b) => a.msgtxFromSap.length - b.msgtxFromSap.length
          },
          {
            title: 'SAP出库物料凭证编号',
            align: 'center',
            dataIndex: 'mblnrFromSap',
            width: 210,
            sorter: (a, b) => a.mblnrFromSap.length - b.mblnrFromSap.length
          },
          {
            title: 'SAP出库物料凭证中的项目',
            align: 'center',
            dataIndex: 'mblppoFromSap',
            width: 210,
            sorter: (a, b) => a.mblppoFromSap.length - b.mblppoFromSap.length
          },
          {
            title: 'SAP出库物料凭证的年份',
            align: 'center',
            dataIndex: 'mjahrFromSap',
            width: 210,
            sorter: (a, b) => a.mjahrFromSap.length - b.mjahrFromSap.length
          }
        ],
        operator: operator
      }
    },
    created() {
    },
    filters: {
      format(time) {
        let date = new Date(time)
        return formatDate(date, 'yyyy-MM-dd')
      },
      formatSyncStatus(syncStatus) {
        return formatSyncStatus(syncStatus)
      }
    },
    methods: {
    }
  }
</script>
